<!--
 * @Author: duliang thinktanker@163.com
 * @Date: 2025-10-03 13:14:05
 * @LastEditors: duliang thinktanker@163.com
 * @LastEditTime: 2025-10-09 23:53:24
 * @FilePath: \control-net\templates\zhongkong.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%ED%AE
-->
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>集控</title>
    <script src="/static/jquery-3.6.0.min.js"></script>
    <style>
        #image-container {
            width: 100%;
            height: 30vh;
            /* 增加高度占比，占据80%视口高度 */
            overflow: hidden;
            position: relative;
            border: 1px solid #ccc;
        }

        #image-scroll-content {
            position: absolute;
            width: 100%;
            transition: transform 0.5s ease;
        }

        .image-scroll-item {
            width: 100%;
            height: 30vh;
            /* 与容器高度保持一致 */
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .image-scroll-item img {
            width: 100%;
            /* 图片宽度占满容器 */
            height: 100%;
            /* 高度也占满容器实现拉伸效果 */
            object-fit: fill;
        }

        #time-display {
            text-align: center;
            font-size: 16px;
            margin: 10px 0;
            font-weight: bold;
        }

        @media (max-width: 768px) {
            .image-wrapper {
                min-width: 90%;
            }
        }

        /* 添加弹窗样式 */
        #config-modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.4);
        }

        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 300px;
            border-radius: 5px;
        }

        .modal-content input {
            width: 100%;
            padding: 8px;
            margin: 10px 0;
            box-sizing: border-box;
        }

        .modal-buttons {
            text-align: right;
        }

        .modal-buttons button {
            margin-left: 10px;
            padding: 5px 15px;
        }

        h1 {
            cursor: pointer;
            user-select: none;
            font-size: 18px;
        }

        /* 添加滚动图片样式 */
        #scroll-container {
            width: 100%;
            overflow: hidden;
            position: relative;
            margin: 20px 0;
            border: 1px solid #ccc;
            height: 150px;
        }

        #scroll-content {
            display: flex;
            height: 100%;
            transition: transform 0.5s ease;
        }

        .scroll-item {
            flex: 0 0 auto;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .scroll-item img {
            height: 100%;
            width: auto;
        }

        .scroll-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            padding: 10px;
            cursor: pointer;
            z-index: 10;
        }

        .scroll-nav.left {
            left: 0;
        }

        .scroll-nav.right {
            right: 0;
        }

        .scroll-dots {
            text-align: center;
            margin-top: 10px;
        }

        .scroll-dot {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #ccc;
            margin: 0 5px;
            cursor: pointer;
        }

        .scroll-dot.active {
            background: #333;
        }

        /* 添加横向滚动容器 */
        #horizontal-scroll-container {
            width: 100%;
            overflow-x: auto;
            position: relative;
            margin: 20px 0;
            border: 1px solid #ccc;
            display: flex;
        }

        #horizontal-scroll-content {
            display: flex;
            min-width: 200%;
            /* 保证两个子项可以并排显示 */
            transition: transform 0.5s ease;
        }

        .horizontal-scroll-item {
            flex: 1;
            min-width: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .horizontal-scroll-item img {
            max-width: 100%;
            height: auto;
        }

        #chart-container-horizontal {
            width: 100%;
            padding: 10px;
        }

        #chart-container-horizontal canvas {
            width: 100% !important;
        }

        /* 添加指示器样式 */
        .horizontal-dots {
            text-align: center;
            margin-top: 10px;
        }

        .horizontal-dot {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #ccc;
            margin: 0 5px;
            cursor: pointer;
        }

        .horizontal-dot.active {
            background: #333;
        }
    </style>
</head>

<body>
    <!-- 添加滚动图片容器 -->
    <div id="scroll-container">
        <button class="scroll-nav left">&lt;</button>
        <div id="scroll-content"></div>
        <button class="scroll-nav right">&gt;</button>
    </div>
    <div class="scroll-dots" id="scroll-dots"></div>


    <!-- 修改图片容器为垂直滚动 -->
    <div id="image-container">
        <div id="image-scroll-content"></div>
    </div>
    <!-- 添加横向滚动容器，包含图表和比例图 -->
    <div id="horizontal-scroll-container">
        <div id="horizontal-scroll-content">
        </div>
    </div>

    <div id="time-display"></div>
    <h1 id="title">集控</h1>
    <!-- 添加配置弹窗 -->
    <div id="config-modal">
        <div class="modal-content">
            <h3>修改图片ID</h3>
            <label for="image-ids">请输入图片ID (用逗号分隔):</label>
            <input type="text" id="image-ids" placeholder="例如: 0,1,2">
            <div class="modal-buttons">
                <button id="cancel-btn">取消</button>
                <button id="confirm-btn">确定</button>
            </div>
        </div>
    </div>

    <script>
        // 更新时间显示
        function updateTime() {
            var now = new Date();
            var year = now.getFullYear();
            var month = String(now.getMonth() + 1).padStart(2, '0');
            var day = String(now.getDate()).padStart(2, '0');
            var hours = String(now.getHours()).padStart(2, '0');
            var minutes = String(now.getMinutes()).padStart(2, '0');
            var seconds = String(now.getSeconds()).padStart(2, '0');
            var timeString = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
            $('#time-display').text(timeString);
        }

        // 页面加载时立即显示时间
        updateTime();

        // 每秒更新时间显示
        setInterval(updateTime, 1000);

        // 配置需要显示的图片ID数量，默认为2个(0,1)
        let imageIds = [0, 1];
        //let imageIds = [0, 1];

        // 滚动图片相关变量
        let scrollImages = [];
        let currentIndex = 0;
        let scrollInterval;
        // 垂直滚动相关变量
        let verticalImages = [];
        let verticalCurrentIndex = 0;
        let verticalScrollInterval;
        // 横向滚动相关变量
        let horizontalCurrentIndex = 0;
        let horizontalScrollInterval;

        // 定义横向滚动项目数组，包含3个图表/图像项目
        const horizontalItems = [
            { id: 'ratio-image1', src: '/gc?id=wg12', alt: '12小时曲线图' },
            { id: 'ratio-image2', src: '/gc?id=wg1', alt: '1小时曲线图' },
            { id: 'ratio-image3', src: '/wgimg?t=ratiopre', alt: '比例图' }
        ];

        // 动态创建图片元素
        function createImages() {
            // 不再在这里创建独立的图片元素
            loadVerticalScrollImages();
        }

        // 加载垂直滚动图片
        function loadVerticalScrollImages() {
            const container = $('#image-scroll-content');
            container.empty();

            imageIds.forEach((id) => {
                const imgUrl = '/gc?id=' + id;
                const item = $(`<div class="image-scroll-item"></div>`);
                const img = $(`<img src="${imgUrl}" alt="监控图片${id}">`);
                item.append(img);
                container.append(item);
            });

            // 复制第一张图片到末尾实现无缝循环
            if (imageIds.length > 0) {
                const firstItem = container.find('.image-scroll-item:first').clone();
                container.append(firstItem);
            }

            startVerticalAutoScroll();
        }

        // 开始垂直自动滚动
        function startVerticalAutoScroll() {
            clearInterval(verticalScrollInterval);
            verticalScrollInterval = setInterval(() => {
                nextVerticalImage();
            }, 5000); // 每5秒切换一次
        }

        // 下一张垂直图片
        function nextVerticalImage() {
            const totalItems = $('#image-scroll-content .image-scroll-item').length;
            verticalCurrentIndex++;

            const itemHeight = $('.image-scroll-item').outerHeight();
            const translateY = -verticalCurrentIndex * itemHeight;

            $('#image-scroll-content').css('transition', 'transform 0.5s ease');
            $('#image-scroll-content').css('transform', `translateY(${translateY}px)`);

            // 当滚动到复制的第一张图片时，重置位置到原始的第一张图片
            if (verticalCurrentIndex >= totalItems - 1) {
                setTimeout(() => {
                    $('#image-scroll-content').css('transition', 'none');
                    verticalCurrentIndex = 0;
                    const resetTranslateY = -verticalCurrentIndex * itemHeight;
                    $('#image-scroll-content').css('transform', `translateY(${resetTranslateY}px)`);
                }, 500);
            }
        }

        // 刷新所有图片
        function refreshImages() {
            var timestamp = new Date().getTime(); // 添加时间戳避免缓存

            // 刷新监控图片
            imageIds.forEach(function (id) {
                var imgElement = $('#image-scroll-content').find(`img[alt="监控图片${id}"]`);
                var newSrc = '/gc?id=' + id + '&' + timestamp;

                imgElement.attr('src', newSrc);
            });
        }

        // 添加刷新横向滚动图片的函数
        function refreshHorizontalImages() {
            var timestamp = new Date().getTime();

            horizontalItems.forEach((item, index) => {
                $(`#${item.id}`).attr('src', `${item.src}&${timestamp}`);

            });
        }

        // 初始化滚动图片
        function initScrollImages() {
            // 生成要显示的图片标签数组
            scrollImages = ['121f7ca1797644b0b6a1a2e45b03b604', '9ef8885ad4af43438e7f084614dd589d', 'ec4ccb4a8af049ceb1a6517506f14e6f', '4e6ec458bb1240e9bfaf67a539fb5783', '9789b39bf27b4f338820f1fa6eef84e7', '6d7457dd63c847f7a51fce4eaf01cb18'];
            renderScrollImages();
            startAutoScroll();
        }

        // 渲染滚动图片
        function renderScrollImages() {
            const scrollContent = $('#scroll-content');
            const scrollDots = $('#scroll-dots');
            scrollContent.empty();
            scrollDots.empty();

            scrollImages.forEach((tag, index) => {
                // 修改为每整点刷新的URL格式
                const now = new Date();
                // 获取当前整点时间戳（例如10:00:00）
                const timestamp = new Date(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours(), 0, 0, 0).getTime();
                const imgUrl = `/swpic?tag=${tag}&t=${timestamp}`;
                //console.log(imgUrl);
                const item = $(`<div class="scroll-item"></div>`);
                const img = $(`<img src="${imgUrl}" alt="滚动图片${tag}">`);
                item.append(img);
                scrollContent.append(item);

                // 添加指示点
                const dot = $(`<div class="scroll-dot ${index === 0 ? 'active' : ''}" data-index="${index}"></div>`);
                scrollDots.append(dot);
            });

            updateScrollPosition();
        }

        // 更新滚动位置
        function updateScrollPosition() {
            const itemWidth = $('.scroll-item').outerWidth(true);
            const translateX = -currentIndex * itemWidth;
            $('#scroll-content').css('transform', `translateX(${translateX}px)`);

            // 更新指示点状态（处理循环情况）
            const actualIndex = currentIndex % scrollImages.length;
            $('.scroll-dot').removeClass('active');
            $(`.scroll-dot[data-index="${actualIndex}"]`).addClass('active');
        }

        // 开始自动滚动
        function startAutoScroll() {
            clearInterval(scrollInterval);
            scrollInterval = setInterval(() => {
                nextImage();
                // 检查是否到达新的整点，如果是则刷新图片
                checkAndRefreshScrollImages();
            }, 5000); // 每5秒切换一次
        }

        // 检查并刷新滚动图片（每整点过20分钟刷新）
        function checkAndRefreshScrollImages() {
            const now = new Date();
            const minutes = now.getMinutes();
            const seconds = now.getSeconds();

            // 如果是整点过20分钟（20分0秒）则刷新图片
            if (minutes === 20 && seconds <= 5) { // 给5秒的缓冲时间
                renderScrollImages();
            }
        }

        // 下一张图片（修改为无缝循环模式）
        function nextImage() {
            currentIndex++;
            const itemWidth = $('.scroll-item').outerWidth(true);

            // 更新位置
            const translateX = -currentIndex * itemWidth;
            $('#scroll-content').css('transition', 'transform 0.5s ease');
            $('#scroll-content').css('transform', `translateX(${translateX}px)`);

            // 当滚动到复制的第一张图片时，重置位置到原始的第一张图片
            if (currentIndex >= scrollImages.length) {
                setTimeout(() => {
                    $('#scroll-content').css('transition', 'none');
                    currentIndex = 0;
                    const resetTranslateX = -currentIndex * itemWidth;
                    $('#scroll-content').css('transform', `translateX(${resetTranslateX}px)`);
                }, 500); // 与过渡时间保持一致
            }

            // 更新指示点状态
            const actualIndex = currentIndex % scrollImages.length;
            $('.scroll-dot').removeClass('active');
            $(`.scroll-dot[data-index="${actualIndex}"]`).addClass('active');
        }

        // 上一张图片（修改为无缝循环模式）
        function prevImage() {
            // 如果在第一张，则跳转到复制的最后一张（视觉上是同一张图）
            if (currentIndex === 0) {
                const itemWidth = $('.scroll-item').outerWidth(true);
                currentIndex = scrollImages.length;
                const translateX = -currentIndex * itemWidth;
                $('#scroll-content').css('transition', 'none');
                $('#scroll-content').css('transform', `translateX(${translateX}px)`);
            }

            currentIndex--;
            const itemWidth = $('.scroll-item').outerWidth(true);
            const translateX = -currentIndex * itemWidth;
            $('#scroll-content').css('transition', 'transform 0.5s ease');
            $('#scroll-content').css('transform', `translateX(${translateX}px)`);

            // 更新指示点状态
            const actualIndex = currentIndex % scrollImages.length;
            $('.scroll-dot').removeClass('active');
            $(`.scroll-dot[data-index="${actualIndex}"]`).addClass('active');
        }

        // 渲染滚动图片（修改为支持无缝循环）
        function renderScrollImages() {
            const scrollContent = $('#scroll-content');
            const scrollDots = $('#scroll-dots');
            scrollContent.empty();
            scrollDots.empty();

            // 添加所有图片项
            scrollImages.forEach((tag, index) => {
                // 修改为每整点刷新的URL格式
                const now = new Date();
                // 获取当前整点时间戳（例如10:00:00）
                const timestamp = new Date(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours(), 0, 0, 0).getTime();
                const imgUrl = `/swpic?tag=${tag}&t=${timestamp}`;
                //console.log(imgUrl);
                const item = $(`<div class="scroll-item"></div>`);
                const img = $(`<img src="${imgUrl}" alt="滚动图片${tag}">`);
                item.append(img);
                scrollContent.append(item);

                // 添加指示点（只添加一次，不复制）
                if (index === 0) {
                    const dot = $(`<div class="scroll-dot active" data-index="${index}"></div>`);
                    scrollDots.append(dot);
                } else {
                    const dot = $(`<div class="scroll-dot" data-index="${index}"></div>`);
                    scrollDots.append(dot);
                }
            });

            // 复制第一张图片到末尾以实现无缝循环
            if (scrollImages.length > 0) {
                const firstTag = scrollImages[0];
                const now = new Date();
                const timestamp = new Date(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours(), 0, 0, 0).getTime();
                const imgUrl = `/swpic?tag=${firstTag}&t=${timestamp}`;
                const item = $(`<div class="scroll-item"></div>`);
                const img = $(`<img src="${imgUrl}" alt="滚动图片${firstTag}">`);
                item.append(img);
                scrollContent.append(item);
            }
        }

        // 保存图表实例
        let myChart = null;

        // 渲染图表

        // 更新图表数据

        // 初始化横向滚动
        function initHorizontalScroll() {
            // 动态创建横向滚动项
            const container = $('#horizontal-scroll-content');
            container.empty();

            horizontalItems.forEach(item => {
                const div = $('<div class="horizontal-scroll-item"></div>');
                const img = $(`<img id="${item.id}" src="${item.src}" alt="${item.alt}">`);
                div.append(img);
                container.append(div);
            });

            // 添加指示器
            const dotsContainer = $('<div class="horizontal-dots"></div>');
            $('#horizontal-scroll-container').after(dotsContainer);

            // 为项目创建指示点
            for (let i = 0; i < horizontalItems.length; i++) {
                const dot = $(`<div class="horizontal-dot ${i === 0 ? 'active' : ''}" data-index="${i}"></div>`);
                dotsContainer.append(dot);
            }

            startHorizontalAutoScroll();
        }

        // 添加定时刷新功能：每天特定时间刷新页面
        function scheduleDailyRefresh() {
            setInterval(function () {
                const now = new Date();
                const hours = now.getHours();
                const minutes = now.getMinutes();

                // 检查是否为指定时间（每天8:30、12:30、16:30）
                if ((hours === 8 && minutes === 30) || (hours === 12 && minutes === 30) || (hours === 16 && minutes === 30)) {
                    // 刷新页面
                    location.reload();
                }
            }, 60000); // 每分钟检查一次时间
        }

        // 开始横向自动滚动
        function startHorizontalAutoScroll() {
            clearInterval(horizontalScrollInterval);
            horizontalScrollInterval = setInterval(() => {
                nextHorizontalItem();
            }, 8000); // 每8秒切换一次
        }

        // 下一个横向项目
        function nextHorizontalItem() {
            horizontalCurrentIndex = (horizontalCurrentIndex + 1) % 3;
            updateHorizontalScrollPosition();
        }

        // 更新横向滚动位置
        function updateHorizontalScrollPosition() {
            const itemWidth = $('.horizontal-scroll-item').outerWidth();
            const translateX = -horizontalCurrentIndex * itemWidth;

            $('#horizontal-scroll-content').css('transform', `translateX(${translateX}px)`);

            // 更新指示点状态
            $('.horizontal-dot').removeClass('active');
            $(`.horizontal-dot[data-index="${horizontalCurrentIndex}"]`).addClass('active');
        }

        // 初始化图片显示
        createImages();
        initScrollImages();
        initHorizontalScroll();
        scheduleDailyRefresh(); // 启动每日定时刷新功能

        // 每10秒刷新一次图片
        setInterval(refreshImages, 10000);

        // 添加每分钟刷新横向滚动图片
        setInterval(refreshHorizontalImages, 60000);

        // 滚动图片事件绑定
        $('.scroll-nav.right').click(function () {
            nextImage();
            startAutoScroll(); // 重置自动滚动
        });

        $('.scroll-nav.left').click(function () {
            prevImage();
            startAutoScroll(); // 重置自动滚动
        });

        $(document).on('click', '.scroll-dot', function () {
            currentIndex = parseInt($(this).attr('data-index'));
            updateScrollPosition();
            startAutoScroll(); // 重置自动滚动
        });

        // 横向滚动指示点点击事件
        $(document).on('click', '.horizontal-dot', function () {
            horizontalCurrentIndex = parseInt($(this).attr('data-index'));
            updateHorizontalScrollPosition();
            startHorizontalAutoScroll(); // 重置自动滚动
        });

        // 添加点击标题弹出配置窗口的功能
        $('#title').click(function () {
            $('#image-ids').val(imageIds.join(','));
            $('#config-modal').show();
        });

        // 关闭弹窗
        $('#cancel-btn').click(function () {
            $('#config-modal').hide();
        });

        // 确认修改
        $('#confirm-btn').click(function () {
            const input = $('#image-ids').val();
            if (input.trim() === '') {
                imageIds = [];
            } else {
                try {
                    imageIds = input.split(',').map(id => parseInt(id.trim())).filter(id => !isNaN(id));
                } catch (e) {
                    alert('输入格式错误，请输入用逗号分隔的数字');
                    return;
                }
            }
            $('#config-modal').hide();
            loadVerticalScrollImages();
            refreshImages();
        });

        // 点击弹窗外部关闭
        $(window).click(function (event) {
            if (event.target.id === 'config-modal') {
                $('#config-modal').hide();
            }
        });

        // 页面可见性变化时暂停/恢复自动滚动
        document.addEventListener('visibilitychange', function () {
            if (document.hidden) {
                // 页面隐藏时清除所有定时器
                clearInterval(scrollInterval);
                clearInterval(verticalScrollInterval);
                clearInterval(horizontalScrollInterval);
            } else {
                // 页面显示时重新启动定时器
                startAutoScroll();
                startVerticalAutoScroll();
                startHorizontalAutoScroll();
            }
        });
    </script>
</body>

</html>